(function(){
  // var cover = document.querySelector('.cover');
  // setTimeout(function(){
  //     cover.style.display = 'none';
  //     // 加载数据
  //     show();
  // }, 500);
  // 加载数据
  function show() {
    // 使用刚指定的配置项和数据显示图表。
    myLineChart.setOption(lineOption);

    // 使用刚指定的配置项和数据显示图表。
    myBarChart.setOption(barOption);
  }
 

 // 折线图
 var myLineChart = echarts.init(document.querySelector('.myLineChart'));
 var lineOption = {
    grid: {
        left: '5%',
        right: '2%',
        top: '10%',
        bottom:'30%'
    },
    //鼠标移入的提示
    tooltip: {
        trigger: 'axis',
    },
    //图例组件
    legend: {
        top: '0%',
        right: '2%'
    },
    //x轴
    xAxis: {
        type: 'category',
        //坐标轴两边留白策略
        boundaryGap: false,
        data: ['张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥']
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value}'
        },
        //强制设置坐标轴分割间隔
        interval: 5000
    },
    //数据缩放
    dataZoom: [{
            type: 'inside',
            start: 0,
            end: 60
        },
        {
            start: 0,
            end: 60
        }
    ],
    series: [{
            name: '期望薪资',
            type: 'line',
            data: [8300, 9600, 15000, 27000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000],
            //是否平滑显示
            smooth: true,
            // 圆点的形状设置 
            symbol: 'none',
            // 圆点的大小设置 
            symbolSize: 40,
            //线条和圆点的样式设置
            itemStyle: {
                color: '#ee6666'
            }
        },
        {
            name: '实际薪资',
            type: 'line',
            data: [9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 13000],
            //是否平滑显示
            smooth: true,
            // 圆点的形状设置 
            symbol: 'none',
            //线条和圆点的样式设置
            itemStyle: {
                color: '#5470c6'
            },
        }
    ]
 };

  // 柱状图
  var myBarChart = echarts.init(document.querySelector('.myBarChart'));

    // 指定图表的配置项和数据
    var barOption = {
        //鼠标移入的提示
        tooltip: {
            trigger: 'axis',
            //指示器类型。
            axisPointer: {
                //阴影指示器
                type: 'cross'
            }
        },
        legend: {
            data: ['平均分', '低于60分人数', '60到80之间', '高于80分人数']
        },
        // 类似于内边距
        grid: {
            top: '10%',
            bottom: '10%',
            left: '5%',
            right: '5%'
        },
        //x轴
        xAxis: [{
            type: 'category',
            //刻度
            axisTick: {
                show: true
            },
            data: ['1组', '2组', '3组', '4组', '5组', '6组', '7组'],
            axisPointer: {
                type: 'shadow'
            }
        }],
        //y轴
        yAxis: [{
                type: 'value',
                //最大最小
                min: 0,
                max: 100,
                //强制设置坐标轴分割间隔
                interval: 10,
                //控制整个Y轴是否显示的
                show:true,
                //控制轴线的
                axisLine:{
                  show:true
                },
                //轴文本
                axisLabel: {
                    formatter: function (value) {
                        return value + '分';
                    }
                }
            },
            {
                type: 'value',
                //最大最小
                min: 0,
                max: 10,
                //强制设置坐标轴分割间隔
                interval: 1,
                //控制整个Y轴是否显示的
                show:true,
                // 控制轴线的
                axisLine:{
                  show:true
                },
                //轴文本
                axisLabel: {
                    formatter: function (value) {
                        return value + '人';
                    }
                }
            }
        ],
        series: [{
                name: '平均分',
                type: 'bar',
                //不同柱子之间的间隙
                barGap: '10%',
                //柱条的宽度
                barWidth: '20%',
                //高亮的图形样式和标签样式。
                emphasis: {
                    //none' 不淡出其它图形，默认使用该配置。
                    focus: 'none'
                },
                data: [83, 57, 90, 78, 66, 76, 77, 87, 69, 92, 88, 78],
                //表示这个图例使用的是第一条Y轴
                yAxisIndex: 0
            },
            {
                name: '低于60分人数',
                type: 'bar',
                data: [2, 1, 3, 4, 2, 5, 2, 2, 4, 1, 6, 2],
                //表示这个图例使用的是第二条Y轴
                yAxisIndex: 1
            },
            {
                name: '60到80之间',
                type: 'bar',
                data: [3, 2, 1, 5, 1, 2, 3, 4, 5, 2, 2, 4],
                //表示这个图例使用的是第二条Y轴
                yAxisIndex: 1
            },
            {
                name: '高于80分人数',
                type: 'bar',
                data: [3, 2, 1, 5, 1, 2, 3, 4, 5, 2, 2, 4],
                //表示这个图例使用的是第二条Y轴
                yAxisIndex: 1
            }
        ],
        color: ['#5470C6','#91CC75','#FAC858','#EE6666']
    };

    show();
})();